PrimeVue 提供各樣 icon 可顯示，須額外安裝 icon 套件 PrimeIcons，步驟如下：

1. 使用 npm install primeicons 下載。
2. 在 style.scss 載入

@import 'primeicons/primeicons.css';

該 style.scss 會在 main.js 全域引入

import './assets/main.scss'

PrimeIcons 圖示使用的語法為 pi pi-{icon}，比如 pi pi-search，可採用的 html tag 為 <i> 或 <span> 。

<i class="pi pi-check me-3"></i>
<i class="pi pi-bell me-3"></i>
<span class="pi pi-eye me-3"></span>
<span class="pi pi-user"></span>

若要調整大小，可使用 style 行內樣式設定；若有載入 tailwindCSS，可使用 font-size 樣式套用。

<i class="pi pi-check me-3" style="font-size: 1rem"></i>
<i class="pi pi-bell me-3" style="font-size: 1.5rem"></i>
<i class="pi pi-eye me-3 text-5xl"></i> <!-- tailwindCSS font size -->
<i class="pi pi-user" style="font-size: 2.5rem"></i>

若要調整顏色，同樣可使用 style 行內樣式設定；若有載入 tailwindCSS，可使用 text color 或 PrimeVue 樣式套用。

<i class="pi pi-check me-3 text-orange-400"></i> <!-- tailwindCSS -->
<i class="pi pi-bell me-3" style="color: green"></i>
<i class="pi pi-eye me-3 text-surface-300"></i> <!-- PrimeVue -->
<i class="pi pi-user" style="color: #ff0000"></i>

額外提供 pi-spin 樣式，套用後會進行旋轉效果(infinite rotation)

<i class="pi pi-spin pi-spinner me-3" style="font-size: 2rem"></i>
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>

若要在程式碼中使用 PrimeIcons 圖示套用，採用的方式如下：

<script setup>
import { ref } from 'vue';
import { PrimeIcons } from '@primevue/core/api';

const items = ref([
    {
        label: 'File',
        items: [
            { label: 'New', icon: PrimeIcons.PLUS },
            { label: 'Open', icon: PrimeIcons.DOWNLOAD }
        ]
    }
])
</script>

<div class="card flex justify-start">
    <Menu :model="items" />
</div>

PrimeIcons 所有圖示的查詢：https://primevue.org/icons/#list

參考連結：https://primevue.org/icons/